import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'
import img1 from './assets/1.jpg'
import img2 from './assets/2.jpg'
import img3 from './assets/3.jpg'
const imgs = [img1,img2,img3]
const h1 = (<h1>Hello World <p>这是一个P元素</p></h1>)

// const h = (<h1>Hello World <p>这是一个P元素</p></h1>
// <p>第二个p</p>
// )
// const h = (<>
// <h1>Hello World <p>这是一个P元素</p></h1>
// <p>第二个p</p>
// </>
// )
const a = 'hello',
      b = 'world',
      // obj = {
      //   a:1,
      //   b:2
      // },
      reactObj = <span>react元素对象</span>,
      arr = [1,2,3,null,false,undefined];
const numbers = new Array(30);
numbers.fill(0);
const list = numbers.map((item,i)=>{
  return <li key={i}>{i}</li>
})      
// index.js:1375 Warning: Each child in a list should have a unique "key" prop.

// Check the top-level render call using <ul>. See https://fb.me/react-warning-keys for more information.
//     in li (at src/index.jsx:24)
const stringDom = '<p>字符串。。。。。。。。。。</p>'
let h3 = (
  <h1 className="h1-test" style={{
    color:'#333',
    padding: '10px',
    marginLeft:'20px'
    }}>
      {a}*{b}
      {/* 是否显示 */}
      <div>
      <div> {false}
      {'false:'+ false}</div>
      <div> {null}
      {'null:'+null}</div>
      <div>  {undefined}
      {'undefined:'+undefined}</div>
      </div>
      <div>  {0}
      {'0'+ 0 }</div>
      {/* {obj} 普通对象无法放置*/}
      {/* react元素对象 可以放置 */}
      {reactObj}
     <div> {arr}</div>
     <ul>{list}</ul>
     <div dangerouslySetInnerHTML={{
      __html:stringDom
     }}></div>
  </h1>
)
console.log(h3)
console.log(Object.getOwnPropertyDescriptor(h3, 'props'))
// configurable:false
// enumerable: true
// value: {className: 'h1-test', style: {…}, children: Array(9)}
// writable:false
// h3 = (<p>11</p>)

let index = 0;
let timer = ''

const container = document.getElementById('root');
function render() {
  const img = <img src={imgs[index]}></img>
  ReactDOM.render(img,container);
}

function start(){
  timer = setInterval(() => {
      index = (index + 1) % 3
      render()
  }, 1000);
}
function stop(){
    clearInterval(timer)
}


render();

start();

container.onmouseenter = function(){
    stop();
}

container.onmouseleave = function(){
    start();
}